<template>
  <div >
    <van-form >
      <!-- 基本信息 -->
      <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
        <div class="blue_item" />
        <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">支出合同管理</span>
      </div>
      <!--    <van-field readonly required name="contractPlanType" :value="businessdata.contractPlanType" label-width="12em" label="签约方式(合同计划类型)：" />-->
      <!--    <van-field readonly required name="contractSerialNumber" :value="businessdata.contractSerialNumber" label-width="6em" label="合同流水号：" />-->
      <!--    <van-field readonly name="contractNumber" :value="businessdata.contractNumber" label-width="5em" label="合同编码：" />-->
      <van-field readonly required name="contractNoMoney" :value="fromdata.outcomeDataList[0].splitList[0].splitNoAmount" label-width="13em" label="合同计划金额(不含税元)：" />
      <van-field readonly  name="splitIncludedAmountTotal" :value="fromdata.outcomeDataList[0].splitIncludedAmountTotal" label-width="13em" label="拆分含税总金额合计(元)：" />
      <van-field readonly  name="paymentLimitTotal" :value="fromdata.outcomeDataList[0].paymentLimitTotal" label-width="15em" label="付款含税收付款额度合计(元)：" />
      <van-field readonly  name="paymentLimitTotal" :value="fromdata.outcomeDataList[0].paymentLimitTotal" label-width="12em" label="合同计划IT金额(含税元)：" />
      <van-field readonly  name="paymentLimitTotal" :value="fromdata.outcomeDataList[0].paymentLimitTotal" label-width="12em" label="合同计划CT金额(含税元)：" />
      <van-field readonly  name="outcomePlanDeviation" :value="zizhudata.outcomePlanDeviation" label-width="17em" label="支出合同签约额与支出计划偏差(%)：" />
      <!--    <van-field readonly required name="contractAmount" :value="businessdata.contractAmount" label-width="10em" label="合同含税总金额(元)：" />-->


      <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
        <div class="blue_item" />
        <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">合同费项表</span>
      </div>
      <el-table :data="feeList" border style="width: 100%">
        <el-table-column prop="feeItemSerialNumber" label="费项序列号" />
        <el-table-column prop="feeItemsName" label="价款费项名称" />
        <el-table-column prop="feeItemsDescribe" label="费项描述" />
        <el-table-column prop="taxRate" label="税率" />
        <el-table-column prop="noAmount" label="不含税金额" />
        <el-table-column prop="amount" label="含税金额" />
        <el-table-column prop="taxAmount" label="税额" />
      </el-table>
      <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
        <div class="blue_item" />
        <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">交付进度</span>
      </div>
      <el-table :data="fromdata.outcomeDataList[0].deliveryList" border style="width: 100%">
        <el-table-column prop="deliveryPhase" label="交付阶段" />
        <el-table-column prop="contractSchedule" label="合同正文进度条款" />
        <el-table-column prop="deliveryDate" label="合同计划交付年月" />
        <el-table-column prop="contractDeadline" label="合同工期要求(天)" />
        <el-table-column prop="rests" label="其他" />
      </el-table>
      <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
        <div class="blue_item" />
        <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">付款计划</span>
      </div>
      <el-table :data="payeeList" border style="width: 100%">
        <el-table-column prop="paymentStage" label="付款阶段" />
        <el-table-column prop="paymentRatio" label="付款比例(%)" />
        <el-table-column prop="paymentLimit" label="含税付款额度(元)" />
        <el-table-column prop="contractTerms" label="合同正文付款条款" />
        <el-table-column prop="advanceDate" label="预计付款年月" />
      </el-table>
      <div v-if="zizhudata.contractType=='有收有支'">
        <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
          <div class="blue_item" />
          <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">收款计划</span>
        </div>
        <el-table :data="outpayList" border style="width: 100%">
          <el-table-column prop="paymentStage" label="收款阶段" />
          <el-table-column prop="paymentRatio" label="收款比例(%)" />
          <el-table-column prop="paymentLimit" label="含税收款额度(元)" />
          <el-table-column prop="contractTerms" label="合同正文收款条款" />
          <el-table-column prop="advanceDate" label="预计收款年月" />
          <el-table-column prop="rests" label="其他" />
        </el-table>
      </div>
      <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
        <div class="blue_item" />
        <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">支出拆分表(IT部分)</span>
      </div>
      <el-table :data="splitList" border style="width: 100%">
        <el-table-column prop="feeItemsName" label="价款费项名称" />
        <el-table-column prop="splitBusinessType" label="业务大类" />
        <el-table-column prop="splitSujectName" label="支出科目名称" />
        <el-table-column prop="splitSujectCode" label="科目代码" />
        <el-table-column prop="isUniversal" label="是否属于通服支出" />
        <el-table-column prop="splitTaxRate" label="税率" />
        <el-table-column prop="splitIncludedAmount" label="含税总金额（元）" />
        <el-table-column prop="splitNoAmount" label="不含税金额（元）" />
        <el-table-column prop="splitTaxAmount" label="税额" />
        <el-table-column prop="paymentType" label="计提类型" />
        <el-table-column prop="billingTime" label="计提时长(月)" />
        <el-table-column prop="contractPhase" label="合同约定支出阶段" />
      </el-table>
      <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
        <div class="blue_item" />
        <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">支出拆分表(CT部分)</span>
      </div>
      <el-table :data="splitCTList" border style="width: 100%">
        <el-table-column prop="feeItemsName" label="价款费项名称" />
        <el-table-column prop="splitBusinessType" label="业务大类" />
        <el-table-column prop="splitSujectName" label="支出科目名称" />
        <el-table-column prop="splitSujectCode" label="科目代码" />
        <el-table-column prop="isUniversal" label="是否属于通服支出" />
        <el-table-column prop="splitTaxRate" label="税率" />
        <el-table-column prop="splitIncludedAmount" label="含税总金额（元）" />
        <el-table-column prop="splitNoAmount" label="不含税金额（元）" />
        <el-table-column prop="splitTaxAmount" label="税额" />
        <el-table-column prop="paymentType" label="计提类型" />
        <el-table-column prop="billingTime" label="计提时长(月)" />
        <el-table-column prop="contractPhase" label="合同约定支出阶段" />
      </el-table>
      <div v-if="zizhudata.contractType=='有收有支'">
        <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
          <div class="blue_item" />
          <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">收入拆分表（IT部分）</span>
        </div>
        <el-table :data="incomeITList" border style="width: 100%">
          <el-table-column prop="splitBusinessType" label="业务大类" />
          <el-table-column prop="splitSujectName" label="收入账单名称" />
          <el-table-column prop="splitSujectCode" label="账单代码" />
          <el-table-column prop="isUniversal" label="是否属于通服收入" />
          <el-table-column prop="splitTaxRate" label="税率(%)" />
          <el-table-column prop="splitIncludedAmount" label="含税总金额（元）" />
          <el-table-column prop="splitNoAmount" label="不含税金额（元）" />
          <el-table-column prop="splitTaxAmount" label="税额(元)" />
          <el-table-column prop="paymentType" label="出账类型" />
          <el-table-column prop="billingTime" label="计提时长(月)" />
          <el-table-column prop="splitStartDate" label="预计计费起始日期" />
          <el-table-column prop="splitEndDate" label="预计计费结束日期" />
          <el-table-column prop="contractPhase" label="合同约定计费阶段" />
          <el-table-column prop="isAbilityLogo" label="是否融自有能力" />
          <el-table-column prop="abilityLogo" label="自有能力名称" />
          <el-table-column prop="entrustedSalesAccount" label="是否受托代销科目" />
        </el-table>
        <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
          <div class="blue_item" />
          <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">收入拆分表（CT部分）</span>
        </div>
        <el-table :data="incomeCTList" border style="width: 100%">
          <el-table-column prop="splitBusinessType" label="业务大类" />
          <el-table-column prop="splitSujectName" label="收入账单名称" />
          <el-table-column prop="splitSujectCode" label="账单代码" />
          <el-table-column prop="isUniversal" label="是否属于通服收入" />
          <el-table-column prop="splitTaxRate" label="税率(%)" />
          <el-table-column prop="splitIncludedAmount" label="含税总金额（元）" />
          <el-table-column prop="splitNoAmount" label="不含税金额（元）" />
          <el-table-column prop="splitTaxAmount" label="税额(元)" />
          <el-table-column prop="paymentType" label="出账类型" />
          <el-table-column prop="billingTime" label="计提时长(月)" />
          <el-table-column prop="splitStartDate" label="预计计费起始日期" />
          <el-table-column prop="splitEndDate" label="预计计费结束日期" />
          <el-table-column prop="contractPhase" label="合同约定计费阶段" />
          <el-table-column prop="isAbilityLogo" label="是否融自有能力" />
          <el-table-column prop="abilityLogo" label="自有能力名称" />
          <el-table-column prop="entrustedSalesAccount" label="是否受托代销科目" />
        </el-table>
      </div>
    </van-form>
    <div style="padding-bottom: 42px"></div>
  </div>
</template>
 
<script>
import { openFileUrl } from '@/store/openFile'
import historyAndSuggs from "@/views/srqr/historyAndSuggs.vue"
export default {
  data() {
    return {
      showUpAndDownPop:false, 
      UpAndDownPopColumns:['是', '否'],
      showCalculateModePop:false, 
      CalculateModePopColumns:['主理人', '代理人'],
      showIsAttentionPop:false, 
      IsAttentionPopColumns:['是', '否'],
      outcomeDataList:{},
      splitList:[],
      payeeList:[],
      incomeITList:[],
      incomeCTList:[],
      outpayList:[],
      feeList:[],
      splitCTList:[]
    }
  },
  props: ['businessdata','fromdata','showHistory','historydata','approveList','zizhudata'],
  created() {
    this.outcomeDataList=this.fromdata.outcomeDataList[0]
    this.setdata()
  },
  methods: {
    setdata(){
      var feeItemsList_number1=0
      var feeItemsList_number2=0
      var feeItemsList_number3=0
      for (var i=0;i<this.outcomeDataList.feeItemsList.length;i++) {
        feeItemsList_number1=Number(feeItemsList_number1)+Number(this.outcomeDataList.feeItemsList[i].noAmount)
        feeItemsList_number2=Number(feeItemsList_number2)+Number(this.outcomeDataList.feeItemsList[i].amount)
        feeItemsList_number3=Number(feeItemsList_number3)+Number(this.outcomeDataList.feeItemsList[i].taxAmount)
        this.feeList.push(this.outcomeDataList.feeItemsList[i]);
      }
      var feeItemsListadd={'feeItemSerialNumber':'合计','noAmount':feeItemsList_number1.toFixed(2), 'amount':feeItemsList_number2.toFixed(2),'taxAmount':feeItemsList_number3.toFixed(2)}
      this.feeList.push(feeItemsListadd);

      // var splitList_number1=0
      // var splitList_number2=0
      // var splitList_number3=0
      // for (var i=0;i<this.outcomeDataList.splitList.length;i++) {
      //   splitList_number1=Number(splitList_number1)+Number(this.outcomeDataList.splitList[i].splitIncludedAmount)
      //   splitList_number2=Number(splitList_number2)+Number(this.outcomeDataList.splitList[i].splitNoAmount)
      //   splitList_number3=Number(splitList_number3)+Number(this.outcomeDataList.splitList[i].splitTaxAmount)
      //   this.splitList.push(this.outcomeDataList.splitList[i]);
      // }
      // var splitListadd={'splitSujectCode':'合计','splitIncludedAmount':splitList_number1.toFixed(2), 'splitNoAmount':splitList_number2.toFixed(2), 'splitTaxAmount':splitList_number3.toFixed(2)}
      // this.splitList.push(splitListadd);

      var itList_number1=0
      var itList_number2=0
      var itList_number3=0
      var ctList_number1=0
      var ctList_number2=0
      var ctList_number3=0
      var ctAndIt_number1=0
      var ctAndIt_number2=0
      var ctAndIt_number3=0
      for (var i=0;i<this.outcomeDataList.splitList.length;i++) {
        if(this.outcomeDataList.splitList[i].contractPartType=='IT'){
          itList_number1=Number(itList_number1)+Number(this.outcomeDataList.splitList[i].splitIncludedAmount)
          itList_number2=Number(itList_number2)+Number(this.outcomeDataList.splitList[i].splitNoAmount)
          itList_number3=Number(itList_number3)+Number(this.outcomeDataList.splitList[i].splitTaxAmount)
          this.splitList.push(this.outcomeDataList.splitList[i]);
        }else{
          ctList_number1=Number(ctList_number1)+Number(this.outcomeDataList.splitList[i].splitIncludedAmount)
          ctList_number2=Number(ctList_number2)+Number(this.outcomeDataList.splitList[i].splitNoAmount)
          ctList_number3=Number(ctList_number3)+Number(this.outcomeDataList.splitList[i].splitTaxAmount)
          this.splitCTList.push(this.outcomeDataList.splitList[i]);
        }
        ctAndIt_number1=Number(ctAndIt_number1)+Number(this.outcomeDataList.splitList[i].splitIncludedAmount)
        ctAndIt_number2=Number(ctAndIt_number2)+Number(this.outcomeDataList.splitList[i].splitNoAmount)
        ctAndIt_number3=Number(ctAndIt_number3)+Number(this.outcomeDataList.splitList[i].splitTaxAmount)
      }
      var ctAndItListadd={'feeItemsName':'IT+CT合计','splitIncludedAmount':ctAndIt_number1.toFixed(2), 'splitNoAmount':ctAndIt_number2.toFixed(2), 'splitTaxAmount':ctAndIt_number3.toFixed(2)}
      var itListadd={'feeItemsName':'IT合计','splitIncludedAmount':itList_number1.toFixed(2), 'splitNoAmount':itList_number2.toFixed(2), 'splitTaxAmount':itList_number3.toFixed(2)}
      this.splitList.push(itListadd);
      this.splitList.push(ctAndItListadd);
      var ctListadd={'feeItemsName':'CT合计','splitIncludedAmount':ctList_number1.toFixed(2), 'splitNoAmount':ctList_number2.toFixed(2), 'splitTaxAmount':ctList_number3.toFixed(2)}
      this.splitCTList.push(ctListadd);
      this.splitCTList.push(ctAndItListadd);



      var payeeList_number1=0
      var payeeList_number2=0
      for (var i=0;i<this.outcomeDataList.payeeList.length;i++) {
        payeeList_number1=Number(payeeList_number1)+Number(this.outcomeDataList.payeeList[i].paymentRatio)
        payeeList_number2=Number(payeeList_number2)+Number(this.outcomeDataList.payeeList[i].paymentLimit)
        this.payeeList.push(this.outcomeDataList.payeeList[i]);
      }
      var payeeListadd={'paymentStage':'合计','paymentRatio':payeeList_number1.toFixed(2), 'paymentLimit':payeeList_number2.toFixed(2)}
      this.payeeList.push(payeeListadd);


      if(this.zizhudata.contractType=='有收有支'){
        var outpay_number1=0
        var outpay_number2=0
        for (var i=0;i<this.outcomeDataList.outPayeeList.length;i++) {
          outpay_number1=Number(outpay_number1)+Number(this.outcomeDataList.outPayeeList[i].paymentRatio)
          outpay_number2=Number(outpay_number2)+Number(this.outcomeDataList.outPayeeList[i].paymentLimit)
          this.outpayList.push(this.outcomeDataList.outPayeeList[i]);
        }
        var outpayListadd={'paymentStage':'合计','paymentRatio':payeeList_number1.toFixed(2), 'paymentLimit':payeeList_number2.toFixed(2)}
        this.outpayList.push(outpayListadd);

        var incomeIT_number1=0
        var incomeIT_number2=0
        var incomeIT_number3=0
        var incomeCT_number1=0
        var incomeCT_number2=0
        var incomeCT_number3=0
        for (var i=0;i<this.outcomeDataList.outIncomeList.length;i++) {
          if(this.outcomeDataList.outIncomeList[i].contractPartType=='IT'){
            incomeIT_number1=Number(incomeIT_number1)+Number(this.outcomeDataList.outIncomeList[i].splitIncludedAmount)
            incomeIT_number2=Number(incomeIT_number2)+Number(this.outcomeDataList.outIncomeList[i].splitNoAmount)
            incomeIT_number3=Number(incomeIT_number3)+Number(this.outcomeDataList.outIncomeList[i].splitTaxAmount)
            this.incomeITList.push(this.outcomeDataList.outIncomeList[i]);
          }else if(this.outcomeDataList.outIncomeList[i].contractPartType=='CT'){
            incomeCT_number1=Number(incomeCT_number1)+Number(this.outcomeDataList.outIncomeList[i].splitIncludedAmount)
            incomeCT_number2=Number(incomeCT_number2)+Number(this.outcomeDataList.outIncomeList[i].splitNoAmount)
            incomeCT_number3=Number(incomeCT_number3)+Number(this.outcomeDataList.outIncomeList[i].splitTaxAmount)
            this.incomeCTList.push(this.outcomeDataList.outIncomeList[i]);
          }
        }
        var incomeITListadd={'splitBusinessType':'合计','splitIncludedAmount':incomeIT_number1.toFixed(2), 'splitNoAmount':incomeIT_number2.toFixed(2),'splitTaxAmount':incomeIT_number3.toFixed(2)}
        this.incomeITList.push(incomeITListadd);
        var incomeCTListadd={'splitBusinessType':'合计','splitIncludedAmount':incomeCT_number1.toFixed(2), 'splitNoAmount':incomeCT_number2.toFixed(2),'splitTaxAmount':incomeCT_number3.toFixed(2)}
        this.incomeCTList.push(incomeCTListadd);
      }

    },
    openFileUrlfun(value) {
      this.$router.push(
        {
          name: 'fileview',
          query: {
            openFileUrl: openFileUrl(value)
          }
        }
      );
    },
  },
  computed: {
    isCWSPLocation: function () {
      return this.location=='dict.accountingApproval'
    },
  },
  components: {
    historyAndSuggs
  },
}
</script>
 
<style>
.tables.el-table .cell {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 15px;
    padding-left: 5px;
    padding-right: 5px;
}
</style>